<template>
    <div class="login">
        <div class="beijin">
        <img class="aliimg" src="https://gw.alicdn.com/tfs/TB1ittHRFXXXXcSXFXXXXXXXXXX-2880-1280.jpg">
        </div>
    <div class="header">
        <div class="tianchong">
            <img class="ailiyun" src="//img.alicdn.com/tps/TB16hl5LpXXXXXRXVXXXXXXXXXX-198-46.png">
            <img class="gif" src="//img.alicdn.com/tps/TB1BQh7LpXXXXcJXFXXXXXXXXXX-198-46.gif">
            </div>
        <div class="language">
            <img src="//img.alicdn.com/tfs/TB18R7RRpXXXXabapXXXXXXXXXX-32-32.png">
            &nbsp;中国站&nbsp;<i class="el-icon-arrow-down"></i>
            <ul class="select-menu">
                <li class="select-item">International</li>
                <li class="select-item">日本サイト</li>
            </ul>
        </div>
        <div class="shouye"><router-link to="/">首页</router-link></div>
    </div>
    <div class="login-module">
        <div class="login-title">
            密码登录
            <div class="poptip">扫码登录
                <div class="arrow-right"></div>
            </div>
            <div class="login-choice">
                <i class="iconfont erweima">&#xe63c;</i>
                <div class="triangle-bottomleft"></div>
            </div>
        </div>
        
        <div class="login-form">
            <div class="login-error" v-if="message">
                <svg class="icon" aria-hidden="true" style="margin-left: 5px">
                    <use xlink:href="#icon-gantanhao"></use>
                </svg>&nbsp; 
                <span v-text="message"></span>
            </div>
            <div class="login-password">
            <input type="text" placeholder="邮箱/会员名/8位ID" v-model="loginForm.username" @blur="slidershow=true">
            <input type="text" placeholder="请输入登录密码" v-model="loginForm.password">
            <slider @change="handleChange" v-if="slidershow"></slider>
            <button type="submit" @click="login">登录</button>
            <div class="login-block">
                <a>免费注册</a>              
                <a>忘记会员名</a>
                <a>忘记密码</a>
            </div>
            <div class="sns-login">其他登录方式:
                <a href="#" class="icon-taobao"></a>
                <a href="#" class="icon-cbu"></a>
                <a href="#" class="icon-weibo"></a>
                <a href="#" class="icon-alipay"></a>
                <a href="#" class="icon-dingtalk"></a>
            </div>
        </div>
        </div>
    </div>
        <Help/> 
  </div>
</template>

<script>
import axios from 'axios'
import Help from '@/components/Help-entry.vue'
import slider from '@/components/Login/Slider.vue'
export default {
  name: 'login',
  components: {
    Help,
    slider
  },
  data(){
    return{
        loginForm: {
            username: '',
            password: ''
        },
        message: '',     
        confirm: false,
        slidershow: false
        }
    },
    methods:{
        handleChange (confirm) {
          this.confirm = confirm
        },
        login () {
            if(!this.loginForm.username){
                this.message='请输入帐户名'
                return
            }else if(!this.loginForm.password){
                this.message='请输入密码'
                return
            }else if(!this.confirm){
                this.message='滑动验证失败，请重试'
                return
            }
            this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
          }).catch(()=> {
            this.message='登录名或登录密码不正确'
          })      
        },
        logout () {
            this.$store.commit('DELECT_TOKEN')
            this.$router.push({ path: this.redirect || '/' })
        }
    }   
}
</script>
<style lang="stylus" scoped>
.beijin
    width 100%
    overflow hidden
    position relative
    z-index -1
    height 640px
.aliimg    
    width 107%
    height 640px
.header
    position absolute
    top 0
    width 100%
    height 60px
    border-bottom 1px solid rgba(255,255,255,0.3)
    background-color #1F2325
    display flex
    font-size 14px
    z-index 99
    .ailiyun
        position absolute
        width 100px
        height 24px
        top 15px
        margin-left 20px
    .gif
        margin-top 15px
        margin-left 20px
        width 100px
    .shouye
        height 60px
        width 60px
        line-height 60px
        color #fff
        position relative
        left 1054px
        text-align center
        a
            color #fff
            &:hover
                color #00c1de
    .language
        width 90px
        height 60px
        color #fff
        display flex
        justify-content center
        align-items center
        padding 0 10px
        position relative
        left 1050px
        &:hover
            background-color #272b2f
        &:hover .select-menu
            display block
        &:hover .el-icon-arrow-down
            transform rotate(180deg)
        img
            width 16px
            height 16px
            z-index 9
        .el-icon-arrow-down
            font-size 18px
        .select-menu
            display none
            padding 10px 10px
            position absolute
            top 60px
            left 0
            width 120px
            height 56px
            background-color #272b2f
            li
                height 30px
                line-height 30px
.login-module
    position absolute
    top 158px
    left 790px
    width 380px
    background-color #fff
    display flex
    flex-direction column
    align-items center
    .login-title
        margin 12px 0
        padding-bottom 10px
        width 330px
        height 44px
        line-height 44px
        font-size 18px
        display flex
        justify-content space-between
        .poptip
            position relative
            top 10px
            width 68px
            height 26px
            color #00c1de
            background-color #e6f9fc
            border 1px solid #00c1de
            line-height 26px
            font-size 8px
            text-align center
            margin-left 135px
            &:after, &:before 
                border: solid transparent;
                content: ' '
                width: 0
                height: 0
                position: absolute
                z-index 9
            &:after 
                border-width 6px
                border-left-color #e6f9fc
                top 7px
                left 68px
            &:before
                border-width 7px
                border-left-color: #00c1de
                top 6px
                left 68px
        .login-choice
            margin-top 8px
            .erweima
                color rgba(0,0,0,.5)
                cursor pointer
            .triangle-bottomleft
                position absolute
                top 18px
                width: 0
                height: 0
                border-bottom: 50px solid #fff
                border-right: 50px solid transparent
                cursor pointer
    .login-form
        width 330px
        display flex
        flex-direction column
        justify-content space-between
        align-items stretch
        font-size 12px
        .login-error
            height 28px
            border 1px solid #ff934c
            display flex
            align-items center
            margin-bottom 15px
        .login-password
            width 330px
            display flex
            flex-direction column
            justify-content space-between
            align-items stretch
        input
            box-sizing border-box
            height 42px
            padding-left 10px
            border 1px solid #d7d8d9
            font-size 10px
            margin-bottom 18px
            height 40px
        button
            height 42px
            line-height 42px
            text-align center
            color #fff
            background-color #00c1de
            border 0
            cursor pointer
            margin-top 10px
        .login-block
            height 16px
            margin-top 10px
            a
                float right
                color #666
                margin-left 10px 
                cursor pointer  
        .sns-login
            height 45px
            line-height 45px
            margin-bottom 10px
            display flex
            align-items center
            a   
                display inline-block
                width 22px
                height 22px
                background-size contain
                margin 0 5px
                background-repeat: no-repeat
.icon
    width: 18px; 
    height: 18px;
    fill: currentColor;
    overflow: hidden
</style>